(我的博客里有更新)

跨域,顾名思义,个人理解就是:任意两个url只要协议、域名、端口有任何一个不同，都被当作是不同的域，相互访问就会有跨域问题。

例如如下这一段代码，在前端页面中调试这个ajax所在的页面，页面路径是http://localhost:8081/demo1/index.html，而要访问的接口路径是http://localhost:8082/demo2/login

 $(function(){        $.ajax({            url: "http://localhost:8082/demo2/login",            type: "POST",            contentType: "application/json",            data: JSON.stringify({                        "name": "tomcat",                        password:"oracle"                    }),            success: function(data) {               alert("success")            },        })访问结果坑定是报错,提示的正是无法进行跨域访问

那么问题就是解决跨域问题了  

跨域  要解决这个问题很简单，

只要使页面的前缀和接口的前缀一致就可以了，因此可以使用nginx进行反向代理。打开nginx目录下的conf文件夹，在nginx.conf文件的配置如下:

1.修改nginx.config配置:

#默认监听80端口，ip后面不加端口号默认就是80        listen       80;        #服务器地址        server_name  localhost;        #charset koi8-r;        #access_log  logs/host.access.log  main;        #项目根目录，一般就是启动页        location / {            #项目所在目录            root   C:\Users\shengmengqi\WebstormProjects\angularJsFrame;            #假设across-domain.html的首页，如果之后页面中跳转也是基于http://localhost/跳转            index  across-domain.html;        }        #作用：访问的http://localhost:80/demo2/相当于一个代理url，实际访问的是http://localhost:8082/demo2/;        location /demo2/{            proxy_pass http://localhost:8082/demo2/;        }

2.修改ajax中的请求url

 $(function(){        $.ajax({            url: "http://localhost/demo2/login",            type: "POST",            contentType: "application/json",            data: JSON.stringify({                        "name": "tomcat",                        password:"oracle"                    }),            success: function(data) {               alert("success")            },        })

3.启动nginx.

将ngnix启动起来，在任务管理器中是否有nginx进程，有的话说明启动成功，如果没有，可以查看nginx目录下log文件夹中的error.log，看哪里有问题进行修改，启动成功后，在浏览器地址栏直接访问localhost，这次结果就正确了。 

ajax的请求请求其实是走了nginx代理服务器的.

是不是感觉有点像tomcat配置虚拟路径的感觉啊

案例:业务上线以后，前端页面出现了跨域问题，域名1.xxx.com 跨域访问 2.xxx.com/login/的url，浏览器页面产生问题

   在2.xxx.com的nginx配置项中，添加如下请求头

            if ($http_origin ~* (http://1\.xxx\.com$)) {                     add_header Access-Control-Allow-Headers 'Cookie,Set-Cookie,x-requested-with,content-type';                     add_header Access-Control-Allow-Origin $http_origin ;                     add_header 'Access-Control-Allow-Credentials' 'true';                     add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';                }

大概解释一下，就是从1.xxx.com域名发的请求，可以跨域到2.sss.xxx/login

   在2.sss.com的nginx配置项中，添加如下请求头

            if ($http_origin ~* (http://1\.sss\.com$)) {                     add_header Access-Control-Allow-Headers 'Cookie,Set-Cookie,x-requested-with,content-type';                     add_header Access-Control-Allow-Origin $http_origin ;                     add_header 'Access-Control-Allow-Credentials' 'true';                     add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';                }

大概解释一下，就是从1.sss.com域名发的请求，可以跨域到2.sss.com/bond

进行上面的配置以后，跨域问题解决，浏览器不报错，但是又出现另一个问题，后端tomcat响应头中，一直Set-Cookie，登陆业务一直错误，

确认前端代码，有没有支持跨域请求，需要在js代码中添加一下代码，让前端支持跨域

1.首先去阿里申请免费的https证书

1528815948944.pem;  1528815948944.key;

2.修改nginx配置文件 nginx.conf 

3.进入tomcat，找到conf文件夹中的server.xml

找到                

可在web.xml中添加,也可通过注解的方式允许跨域,我在这里用mvc.xml方式.可以通过https实现跨域访问啦.